<template>
  <!-- 食谱分类 -->
  <div>
    <van-nav-bar>
      <template #left>
        <van-icon
          name="arrow-left"
          @click="onClickLeft()"
          size="16px"
          color="#FF7F24"
        />
      </template>
      <template #title>
        <router-link to="search">
          <van-search
            :clearable="false"
            left-icon="/baking_log/FltPAS-35CZfvSpnHacXWoqcfFz5.png"
            color="gray"
            style="padding: 0"
            placeholder="搜索食谱/食材,烘焙/家常菜一应俱全"
          />
        </router-link>
      </template>
    </van-nav-bar>

    <!-- 侧边栏 -->
    <van-tree-select
      height="100%"
      :items="items"
      :main-active-index.sync="active"
    >
      <template #content>
        <div v-if="active == 0" class="contain">
          <ClassifiCation v-for="i in 10" :key="i - 1"></ClassifiCation>
        </div>
      </template>
    </van-tree-select>
  </div>
</template>

<script>
import ClassifiCation from "../components/ClassifiCation.vue";
export default {
  components: { ClassifiCation },
  data() {
    return {
      active: 0,
      items: [
        { text: "蛋糕" },
        { text: "面包" },
        { text: "饼干" },
        { text: "甜点饮料" },
        { text: "西餐" },
        { text: "零食" },
        { text: "面食" },
        { text: "月饼点心" },
        { text: "烤箱菜" },
        { text: "家常菜" },
        { text: "其它" },
      ],
      data: "",
    };
  },
  methods: {
    onClickLeft() {
      return this.$router.go(-1);
    },
    getData() {
      this.axios
        .get(
          "https://api.hongbeibang.com/classify/get?_t=1666353753812&timestamp=1666353753812"
        )
        .then((res) => {
          console.log(res);
          // console.log(this.data);
          // console.log(res.data);
          this.data = res.data;
        });
    },
  },
  mounted() {
    this.getData();
  },
};
</script>

<style scoped>
:deep(.van-nav-bar__title) {
  max-width: 76%;
  /* padding-right: 10px; */
}
:deep(.van-search) {
  width: 80vw;
}
:deep(.van-icon__image) {
  margin-top: 4px;
}
:deep(.van-tree-select__nav) {
  -webkit-box-flex: 0.6;
  -webkit-flex: 0.6;
  flex: 0.6;
}
:deep(.van-sidebar-item) {
  text-align: center;
}
</style>

<style lang="scss" scoped>
.van-sidebar-item--select::before {
  height: 100%;
  width: 3px;
  background-color: #ea9077;
}
.contain {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  padding: 15px;
}
</style>
